<template>
  <div class="upload-com">
    <i
      v-if="imgUrl"
      class="el-icon-plus "
      style="position: absolute;transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);color: #fff;font-size: 20px;top: 10px;right: 0px;cursor:pointer;"
      @click="delImg()"
    />
    <el-upload
      class="avatar-uploader"
      :action="uploadaction"
      :on-remove="handleRemove"
      :show-file-list="false"
      :headers="myHeaders"
      :accept="uploadaccept"
      :auto-upload="true"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <div v-if="imgUrl !== ''" class="bordershow">
        <img v-if="imgUrl" :src="baseUrl+imgUrl" class="avatar" :width="imgwidth" :height="imgheight" alt="">
      </div>
      <i v-if="imgUrl === ''" ref="areaset" class="el-icon-plus avatar-uploader-icon" :width="imgwidth" :height="imgheight" />
    </el-upload>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  name: 'Upload',
  model: {
    prop: 'modelVal', // 指向props的参数名
    event: 'change' // 事件名称
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    modelVal: {
      type: String
    },
    // eslint-disable-next-line vue/require-default-prop
    imgwidth: {
      type: String
    },
    // eslint-disable-next-line vue/require-default-prop
    imgheight: {
      type: String
    },
    // eslint-disable-next-line vue/require-default-prop
    url: {
      type: String
    }
  },
  data() {
    return {
      loading: false,
      appId: '90c4bf7bbc95708a7f4036a62955f57',
      baseUrl: process.env.VUE_APP_BASE_API,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      myHeaders: { 'Authorization': getToken() },
      uploadaction: process.env.VUE_APP_BASE_API,
      uploadaccept: '.jpg,.jpeg,.png,.JPG,.JPEG,.PBG',
      uploadlimit: 2,
      imgUrl: '',
      upUrl: this.url
    }
  },
  created() {
  },
  mounted() {
    this.$refs.areaset.style.setProperty('--iconwidth', this.imgwidth)
    this.$refs.areaset.style.setProperty('--iconheight', this.imgheight)
  },

  methods: {
    handleAvatarSuccess(response, file, fileList) {
      if (response.result === 1) {
        this.imgUrl = response.data.fileUrl
        this.disabled = true
        this.$emit('uploadSuccess', this.imgUrl)
      } else {
        this.$message({
          message: response.msg, type: 'warning'
        })
      }
    },
    beforeAvatarUpload(file) {
      const testMsg = /^image\/(jpeg|png|jpg)$/.test(file.type)
      if (!testMsg) {
        this.$message({
          message: '上传图片格式不对', type: 'warning'
        })
        return false
      }
      return new Promise((resolve, reject) => {
        this.myHeaders = { 'Authorization': getToken() }
        this.uploadaction = process.env.VUE_APP_BASE_API + this.upUrl
        return resolve(true)
      })
    },
    change(val) {
      this.imgUrl = val
    },
    delImg() {
      this.setImgUrl()
      this.$nextTick(function() {
        this.$refs.areaset.style.setProperty('--iconwidth', this.imgwidth)
        this.$refs.areaset.style.setProperty('--iconheight', this.imgheight)
      }
      )
    },
    setImgUrl() {
      const that = this
      that.imgUrl = ''
      this.$emit('uploadSuccess', null)
    },
    handleRemove() {}

  }
}
</script>

<style scoped>

.line{
  text-align: center;
}
.avatar-uploader{
  --iconwidth: 0px;
  --iconheight: 0px;
  min-height: var(--iconheight);}
.avatar-uploader .el-upload {
  height: var(--iconheight);
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.bordershow{
  border: 1px #cccccc solid;
  min-height: var(--iconheight);
  /*width: var(--iconwidth);*/
  padding: 2px;
display: flex;align-items: center;}
.avatar-uploader-icon {
  border: 1px #cccccc dotted;
  font-size: 28px;
  color: #8c939d;
  width: var(--iconwidth);
  height: var(--iconheight);
  line-height: var(--iconheight);
  text-align: center;
}
.avatar {
  display: block;
  align-items: center;
}
  .upload-com .el-icon-plus{
    --iconwidth: 360px;
    --iconheight: 180px;
  }
</style>
